<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<h:form>
		
		<p:growl id="growl" globalOnly="true" showDetail="false" redisplay="false" autoUpdate="false"/> 
		
		<p:panel id="panelNuevoPedido"
			header="#{msgs['nuevoPedido.text.header']}" style="width:850px"
			aling="center">

			<p:messages id="mensajes" closable="true" severity="error"/>

			<p:outputLabel 
					value="#{msgs['nuevoPedido.text.campoObligatorios']}" />

			<h:panelGrid id="grid1" columns="4" cellpadding="3" cellspacing="3">

				<p:outputLabel for="origen"
					value="#{msgs['nuevoPedido.text.origen']}" />
				<p:inputText id="origen" value="#{pedidoBean.origen}"
					required="true" label="#{msgs['nuevoPedido.text.origen']}"
					size="30" maxlength="64" />

				<p:outputLabel for="destino"
					value="#{msgs['nuevoPedido.text.destino']}" />
				<p:inputText id="destino" value="#{pedidoBean.destino}"
					required="true" label="#{msgs['nuevoPedido.text.destino']}"
					size="30" maxlength="64" />

				<p:outputLabel for="articulo"
					value="#{msgs['nuevoPedido.text.articulo']}" />
				<p:inputText id="articulo" value="#{pedidoBean.articulo}"
					required="true" label="#{msgs['nuevoPedido.text.articulo']}"
					size="30" maxlength="64" />

				<p:outputLabel for="peso" value="#{msgs['nuevoPedido.text.peso']}" />
				<p:inputText id="peso" value="#{pedidoBean.peso}" required="true"
					label="#{msgs['nuevoPedido.text.peso']}" size="20"  />

				<p:outputLabel for="volumen"
					value="#{msgs['nuevoPedido.text.volumen']}" />
				<p:inputText id="volumen" value="#{pedidoBean.volumen}"
					required="true" label="#{msgs['nuevoPedido.text.volumen']}"
					size="25" />

			</h:panelGrid>
			
			<!-- enable focus component -->
			<p:focus for="origen" />
			
			<p:watermark for="origen"
				value="#{msgs['nuevoPedido.intro.text.origen']}" />

			<p:watermark for="destino"
				value="#{msgs['nuevoPedido.intro.text.destino']}" />


			<p:watermark for="articulo"
				value="#{msgs['nuevoPedido.intro.text.articulo']}" />

			<p:watermark for="peso"
				value="#{msgs['nuevoPedido.intro.text.peso']}" />

			<p:watermark for="volumen"
				value="#{msgs['nuevoPedido.intro.text.volumen']}" />


			<h:panelGrid id="grid2" columns="2" cellpadding="3" cellspacing="3">
				<p:outputLabel for="comentario"
					value="#{msgs['nuevoPedido.text.comentario']}" />
				<p:inputTextarea id="comentario" rows="10" cols="50" value="#{pedidoBean.comentario}" queryDelay="750"
					minQueryLength="4" label="#{msgs['nuevoPedido.text.comentario']}" >
					<f:validateLength maximum="256" minimum="0" />
				</p:inputTextarea>
			</h:panelGrid>
			
			
			<f:facet name="footer">
				<center>
					<p:commandButton id="btnAceptar" icon="ui-icon-check"
						value="#{msgs['nuevoPedido.text.btn.aceptar']}" 
						action="#{pedidoBean.nuevoPedido}" update="panelNuevoPedido,growl">
						<p:confirm header="#{msgs['nuevoPedido.text.dialog.titulo']}" 
		        				message="#{msgs['nuevoPedido.text.dialog.pregunta']}"
								icon="ui-icon-alert" />
					</p:commandButton>
				</center>
			</f:facet>



		</p:panel>

		<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
			<center>
				<p:commandButton value="#{msgs['nuevoPedido.text.dialog.btn.aceptar']}"
					type="button" styleClass="ui-confirmdialog-yes"
					icon="ui-icon-check" />
				<p:commandButton
					value="#{msgs['nuevoPedido.text.dialog.btn.cancelar']}"
					type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
			</center>
		</p:confirmDialog>
	</h:form>
</ui:composition>